<!--
  @Description: 申领规则设置弹窗
-->
<template>
  <!-- 根元素添加类名以便边框样式绑定 -->
  <el-dialog
    v-model="innerVisible"
    title="申领规则设置"
    width="560px"
    :close-on-click-modal="false"
    @closed="onClosed"
    class="apply-rule-dialog"
  >
    <div class="form-wrapper">
      <!-- 病区：只读展示，与原型一致 -->
      <el-form label-width="160px" :model="modelRef" label-position="left">
        <el-form-item label="病区">
          <el-input v-model="modelRef.wardName" disabled />
        </el-form-item>

        <!-- 药房：下拉选择（示例提供“本地药房”、“中心药房”） -->
        <el-form-item label="药房">
          <el-select v-model="modelRef.pharmacy" placeholder="选择药房" style="width: 240px">
            <el-option label="本地药房" value="本地药房" />
            <el-option label="中心药房" value="中心药房" />
          </el-select>
        </el-form-item>

        <!-- 仅申请当日药品：复选框；启用开关（与原型文案一致） -->
        <el-form-item label="仅申请当日药品">
          <el-checkbox v-model="modelRef.onlyToday">启用</el-checkbox>
        </el-form-item>

        <el-form-item label="启用">
          <el-switch v-model="modelRef.enabled" />
        </el-form-item>

        <el-form-item label="申请时间" class="time-section">
          <div class="time-list">
            <div v-for="(t, idx) in timeList" :key="idx" class="time-row">
              <span class="time-label">第{{ idx + 1 }}次</span>
              <div class="time-content">
                <TimePickerGrid v-model="timeList[idx]" />
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button @click="addTime">增加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button type="warning" @click="disable">停用</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="ApplyRuleDialog">
import { ref, watch, computed } from 'vue'
import TimePickerGrid from './TimePickerGrid.vue'

// 组件对外属性：可见性与数据模型
const props = defineProps({
  visible: { type: Boolean, default: false },
  // 传入的编辑模型：{ wardName, pharmacy, onlyToday, enabled, times }
  model: { type: Object, default: () => ({}) }
})

// 双向绑定可见性
const emits = defineEmits(['update:visible', 'confirm', 'disable'])
const innerVisible = ref(props.visible)

watch(
  () => props.visible,
  v => (innerVisible.value = v)
)

// 内部可编辑模型：避免直接改动外部数据
const modelRef = ref({ wardName: '', pharmacy: '本地药房', onlyToday: false, enabled: true })

// 时间列表：使用独立数组存储选择结果
const timeList = ref([])

// 同步传入模型
watch(
  () => props.model,
  v => {
    // 关键节点：浅拷贝以避免引用共享导致非期望修改
    modelRef.value = {
      wardName: v?.wardName || '',
      pharmacy: v?.pharmacy || '本地药房',
      onlyToday: Boolean(v?.onlyToday),
      enabled: Boolean(v?.enabled)
    }
    timeList.value = Array.isArray(v?.times) ? [...v.times] : ['08:00']
  },
  { immediate: true }
)

// 增加一行时间选择：默认 08:00，最多 6 次
function addTime() {
  if (timeList.value.length >= 6) return
  timeList.value.push('08:00')
}

// 关闭弹窗
function close() {
  emits('update:visible', false)
}

function confirm() {
  // 输出编辑后的模型
  emits('confirm', {
    wardName: modelRef.value.wardName,
    pharmacy: modelRef.value.pharmacy,
    onlyToday: modelRef.value.onlyToday,
    enabled: modelRef.value.enabled,
    times: timeList.value.filter(Boolean)
  })
  close()
}

function disable() {
  emits('disable')
}

function onClosed() {
  // 弹窗完全关闭后的清理（当前暂不需要）
}
</script>

<style scoped>
/*
 * 组件边框说明：
 * 为根元素（el-dialog）添加 1px 实线浅灰色边框，以便在不同分辨率下突出弹窗区域；
 * 使用 box-sizing: border-box 确保边框不影响既定宽度与内部布局。
 */
.apply-rule-dialog {
  border: 1px solid #dcdfe6; /* 浅灰边框 */
  box-sizing: border-box; /* 边框不影响布局尺寸 */
}

.form-wrapper {
  padding-top: 8px;
}

/*
 * 时间列表显示策略：
 * - 默认展示 4 行；超过 4 行时容器滚动，不影响内部交互和布局。
 * - 通过 CSS 变量控制行高与间距，便于在未来适配不同组件尺寸。
 */
.time-section .time-list {
  /* 仿表格容器：外边框与连续行 */
  border: 1px solid #dcdfe6; /* 外轮廓边框 */
  border-radius: 0; /* 设计图无圆角 */
  overflow: hidden; /* 保持边框连续 */
  display: flex;
  flex-direction: column;
  gap: 0; /* 行与行之间不留空隙，使用分隔线 */
  --time-row-height: 40px; /* 每行大约高度，适配 TimePickerGrid 的默认尺寸 */
  max-height: calc(4 * var(--time-row-height)); /* 展示 4 行 */
  overflow-y: auto; /* 超出滚动 */
}

.time-row {
  display: grid;
  grid-template-columns: 120px 1fr; /* 左列 120px，右列自适应 */
  align-items: center;
  border-bottom: 1px solid #dcdfe6; /* 行分隔线 */
  min-height: var(--time-row-height, 40px);
}
.time-list .time-row:last-child {
  border-bottom: none; /* 最后一行不绘制底部分隔线 */
}

.time-label {
  min-height: var(--time-row-height, 40px);
  line-height: var(--time-row-height, 40px);
  color: var(--el-text-color-primary);
  text-align: center; /* 与设计图一致的居中效果 */
  border-right: 1px solid #dcdfe6; /* 列分隔线 */
  padding: 0 8px; /* 左右留白 */
}

.time-content {
  /* 右列内容容器：控制内边距与对齐 */
  padding: 0 12px; /* 右列左右内边距 */
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>
